<template>
  <div>
    <ul>
      <li>ID:{{$route.params.id}}</li>
      <li>QUERY ID2:{{$route.query.id2}}</li>
      <li>QUERY TITLE:{{$route.query.title}}</li>
      <li>TITLE:{{detail.title}}</li>
      <li>CONTENT:{{detail.content}}</li>
      <li>Message--props:{{msg}}</li>
    </ul>
  </div>
</template>

<script>
const MessageDetail = [
  { id: 1, title: "message001", content: "Message Content001" },
  { id: 3, title: "message003", content: "Message Content003" },
  { id: 5, title: "message005", content: "Message Content005" },
];
export default {
  name: "MessageDetail",
  props:['msg'],
  data(){
    return{
      detail:{}
    }
  },
  mounted(){
    const id = this.$route.params.id*1;
    setTimeout(()=>{
      const detail = MessageDetail.find(item => item.id === id);
      this.detail = detail;
    },1000)
  },
  // 监视$route的变化
  watch:{
    $route(value){
      // console.log(value);
      const id = value.params.id*1;
      setTimeout(() => {
        const detail = MessageDetail.find(item=> item.id === id);
        this.detail = detail;
      },1000)
    }
  }
};
</script>

<style scoped></style>
